<template>
  <div class="h">
      <div id="start">
        <div id="main">
          <div id="contain">
            <el-avatar :size="150" :src="circleUrl"/>
          </div>
          <p>欢迎来到阿新的个人博客！</p>
          <p><span @click="routerChange">立即开始&nbsp;&nbsp;-></span></p>
        </div>
      </div>
  </div>
</template>

<script>
import image from "../assets/imags/头像.jpeg"

export default {
  name: "HelloBody",
  data(){
    return{
      circleUrl: image
    }
  },
  methods:{
    routerChange(){
      this.$router.push('/index')

    }
  }
}
</script>

<style lang="less" scoped>
  *{
    user-select: none;
  }
  .h{
    height: 100%;
    background: #f1ede2 url("/src/assets/imags/开头.png") no-repeat top;
    background-size: cover;
  }
  #start{
    color: #30a7de;
    width: 300px;
    margin: 0 auto;
    padding-top: 210px;
    text-align: center;
    #main{
      background-color: #f6f6f5;
      opacity: 0.8;
      border-radius: 30px;
      #contain{
        padding-top: 30px;

      }
    }
  }
  p{
    text-align: center;
    line-height: 40px;
    padding-top: 20px;
    span{
      padding: 10px;
      line-height: 60px;
      cursor: pointer;
      &:hover{
        color: #233b3b;
      }
    }
  }

</style>
